const {ipcRenderer} = require('electron')

document.getElementById('musicBtn').addEventListener('click',()=>{
    // 通知主进程点击了添加音乐按钮
    ipcRenderer.send('add-music-window','from index.js')
})

ipcRenderer.on('getTracks',(event,tracks) => {
    allTracks = tracks
    console.log('接收',tracks);
    renderListHTML(tracks)
})

// 将 更新的从导入窗口导入的歌曲数据渲染
const renderListHTML = (tracks) => {
    // console.log('调用');
    let html = ''
    const tracksList = document.getElementById('tracksList')
    let tracksListHTML = tracks.forEach((item)=>{
        html += `<li class="row music-track list-group-item d-flex justify-content-between align-center">
        <div class="col-10">
            <i class="fa fa-music mr-2"></i>
            <b>${item.fileName}</b>
        </div>
        <div class="col-2">
            <i class="fa fa-play mr-2" data-id="${item.id}"></i>
            <i class="fa fa-remove mr-2" data-id="${item.id}"></i>
        </div>
    </li>`
    })
    tracksListHTML = html
    console.log(html,'html');
    const emptyTrackHTML = '<div class="alert alert-primary>还没有添加任何音乐</div>"'
    tracksList.innerHTML = tracks.length ? `<ul class="list-group">${tracksListHTML}</ul>`: emptyTrackHTML

    console.log(tracksList,'tracksList');
}

let musicAudio = new Audio()
let allTracks
let currentTrack

// 播放暫停事件 事件委托
document.getElementById('tracksList').addEventListener('click',(event)=>{
    event.preventDefault()
    const {dataset,classList} = event.target
    const id = dataset && dataset.id
    // 点击的播放      
    if(id && classList.contains('fa-play')){

        // 如果播放的是之前暂停的音乐则继续播放不是重新播放
        if(currentTrack && currentTrack.id === id){
            musicAudio.play()
        } else {
            currentTrack = allTracks.find(track => track.id === id)
            musicAudio.src = currentTrack.path
            musicAudio.play()
            // 更改图标
            console.log(document.querySelector('.fa-pause'),'11111111111111111111111111');
            if(!!document.querySelector('.fa-pause')){
                document.querySelector('.fa-pause').classList.replace('fa-pause','fa-play')
            }
        }
        classList.replace('fa-play','fa-pause')
    } else if(id && classList.contains('fa-pause')) {
        // 暂停
        musicAudio.pause()
        classList.replace('fa-pause','fa-play')
    } else if (id && classList.contains('fa-remove')){
        // 删除
        // 通信去删除      
        console.log('删除');
       ipcRenderer.send('delete-track',id) 
    }

    // 渲染下面播放控件
    const renderPlayerHTML = (name,duration) => {
        const player = document.getElementById('player-status')
        const html = `
        <div class="col font-weight-bold">
            正在播放： ${name}
        </div>
        <div class="col">
            <span id="current-seeker">00:00</span> / ${timeHandler(duration)}
        </div>
        `
        player.innerHTML = html
    }

    // 监听播放器 播放资源加载完成
    musicAudio.addEventListener('loadedmetadata',()=>{
        console.log('播放资加');
        renderPlayerHTML(currentTrack.fileName,musicAudio.duration)
    })

    // 监听播放器 播放的时间状态
    musicAudio.addEventListener('timeupdate',()=>{
        updateProgressHTML(musicAudio.currentTime)
    })
    const updateProgressHTML = (currentTime) => {
        document.getElementById('current-seeker').innerHTML = timeHandler(currentTime)
    }

    // 处理时间的方法
    const timeHandler = (miao) => {
        let fen = Math.floor(miao / 60)
        let m = Math.floor(miao - fen * 60)
        fen = fen < 9 ? "0" + fen : fen
        m = m < 9 ? "0" + m : m
        console.log(fen+':'+m);
        return fen + ':' + m
    }
})